<template>
  <!--elment-ui抽屉组件-->
  <el-drawer
      v-model="showDrawer"
      :title="title"
      :size="size"
      :close-on-click-modal="false"
      :destroy-on-close="destroyOnClose">
    <div class="formDrawer">
      <div class="body">
        <!--插槽-->
        <slot></slot>
      </div>
      <!--按钮区域-->
      <div class="actions">
        <el-button type="primary" @click="submit" :loading="loading">{{ confirmText }}</el-button>
        <el-button type="default" @click="close">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import {ref} from "vue"

//抽屉的默认显示状态
const showDrawer = ref(false)

//对外暴露的对象
const props = defineProps({
  //抽屉的标题
  title: String,
  //抽屉的大小
  size: {
    type: String,
    default: "45%"
  },
  //关闭时是否销毁所有的子控件
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  //按钮的文字
  confirmText: {
    type: String,
    default: "提交"
  }
})

//加载中默认状态
const loading = ref(false)
//显示加载中状态
const showLoading = () => loading.value = true
//隐藏加载中状态
const hideLoading = () => loading.value = false

// 打开抽屉
const open = () => showDrawer.value = true

// 关闭抽屉
const close = () => showDrawer.value = false

// 监听submit事件
const emit = defineEmits(["submit"])
//执行submit事件
const submit = () => emit("submit")

// 向父组件暴露以下方法
defineExpose({
  open,
  close,
  showLoading,
  hideLoading
})

</script>
<style>
.formDrawer {
  width: 100%;
  height: 100%;
  position: relative;
  @apply flex flex-col;
}

.formDrawer .body {
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow-y: auto;
}

.formDrawer .actions {
  height: 50px;
  @apply mt-auto flex items-center;
}
</style>